<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="选择上传数据" name="first">
        <el-row>
          <el-col :span="6" style="border:solid 1px green">
            <div v-for="(item,index) in fileList" :key="index" style="width:80%; margin:0 auto;">
              <!--change函数返回一个参数选中的 Radio label 值 label值的绑定在下面el-radio 选项框中-->
              <el-radio-group
                v-model="selectDatasets"
                size="medium"
                text-color="#409EFF"
                @change="selectChange"
              >
                <!--v-model="selectDatasets"实现的绑定是el-radio中的label值-->
                <el-radio :label="item.id" border>{{item.file_name }}</el-radio>
              </el-radio-group>
              <div style="height:10px" />
            </div>
          </el-col>
          <el-col :span="17">
          <el-table :data="tableDesData" border style="height: 200px">
            <el-table-column prop="name" align="center" label="数据集名称" width="150" />
            <el-table-column prop="columnCount" align="center" label="列数" width="100" />
            <el-table-column prop="rowCount" align="center" label="行数" width="100" />
            <el-table-column prop="apply" align="center" label="适用算法" width="100" />
          </el-table>
        </el-col>
        </el-row>
      </el-tab-pane>
      <!--tableContentData 是表格里面的数据 tableTitleData是列名以及与tableContentData里面的数据对应渲染的prop-->
      <el-tab-pane label="数据内容" name="second">
        <div class="app-container">
          <!--使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。-->
          <el-table
            v-loading="listLoading"
            border
            fit
            highlight-current-row
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              v-for="(item,key) in titleData"
              :key="key"
              align="center"
              :prop="item"
              :label="item"
            />
          </el-table>
          <!--v-show 属性通过判断total是否大于0来决定是否显示-->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.page"
            :limit.sync="listQuery.limit"
            @pagination="getList"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="数据结构" name="third">
        <el-table
          :data="tableStructData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="columnName"
            label="名称"
            width="300"
          />
          <el-table-column
            prop="type"
            label="类型"
            width="300"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div style="float: right; margin-top: 10px; margin-bottom: 20px">
      <el-button @click="cancelMethod">取 消</el-button>
      <el-button type="primary" @click="StoreDataMethod">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import axios from 'axios'
  import { cloneDeep } from 'lodash'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

  export default {
      name: "FileUpload",
      components: { Pagination },
      inject: ['root','flowchartId'],
      props: [
        'dialogVisible'
      ],
      data(){
        return {
          flowchartNum:'',
          selectDatasets:'',
          fileList:'',
          tableDesData:[],
          tableData:[],
          titleData:[],
          tableStructData:[],
          activeName: 'first',
          listLoading: true,
          formModel:{},
          total: 0,
          listQuery: {
            page: 1,
            limit: 10
          },
        }
      },
      created(){
        this.flowchartNum = this.flowchartId
        const { getSelected } = this.root.propsAPI
        const Model = getSelected()[0]
        this.formModel = Object.assign(
          {},
          cloneDeep(Model.getModel())
        )
        this.selectDatasets = Model.getModel().config.selectDatasets
        this.getUploadList()
        this.selectChange()
      },
      methods:{
        handleClose(done) {
          this.$emit('close-dialog')
          this.$confirm('确认关闭？')
            .then((_) => {
              done()
            })
            .catch((_) => {
            })
        },
        cancelMethod() {
          this.$emit('close-dialog')
        },
        StoreDataMethod(e) {
          this.$emit('close-dialog')// 告诉父组件要修改管理窗口可视化的变量
          const { getSelected, update } = this.root.propsAPI
          const node = getSelected()[0]
          this.formModel.config.output = this.tableStructData
          this.formModel.config.selectDatasets = this.selectDatasets
          update(node, this.formModel)
        },
        handleClick(tab, event) {
          console.log(tab, event)
        },
        getUploadList(){
          axios
            .get('/api/FileManager/getFileList')
            .then((res) => {
              this.fileList = res.data.data
            })
            .catch((err) => {
              console.log(err)
            })
        },
        async selectChange() {
          // 为了完成数据回显的功能需要添加代码 添加if判断的目的就是修复为了完成这个功能而产生的的bug
          if(this.selectDatasets !== '')
          {
            try {
              const response = await axios.put(//put 是向服务器发送修改请求
                `/api/FileManager/getFileContent`,
                {
                  flowId:this.flowchartNum,
                  nodeId: this.formModel.id,
                  nodeName:this.formModel.alname,
                  queryList:this.listQuery, // 此处请求的目的只是获得初始化的时候需要的第一页的数据内容
                  selectId:this.selectDatasets,
                }
              )
              this.tableDesData = response.data.selectTitle
              this.titleData = response.data.titleData
              this.tableData = response.data.tableData
              this.tableStructData = response.data.tableStructData
              this.total = response.data.total
              this.listLoading = false
            } catch (err) {
              console.log(err)
            }
          }
          else{
            console.log('未选初始数据集')
          }
        },
        async getList(){
          this.listLoading = true
          try {
            const response = await axios.put(//put 是向服务器发送修改请求
              `/api/FileManager/getPageData`,
              {
                flowId:this.flowchartNum,
                nodeId: this.formModel.id,
                nodeName:this.formModel.alname,
                queryList:this.listQuery,// 获取翻页的时候需要的数据内容
              }
            )
            this.tableData = response.data.tableData
            this.listLoading = false
          } catch (err) {
            console.log(err)
          }
        }
      }
    }
</script>

<style scoped>

</style>
